<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/index">首页></router-link>
                        </li>
                        <li class="color666 f_left">特种作业持证人员继续教育报名></li>
                        <li class="color666 f_left">{{type!=0?"面授集训":"在线网教"}}</li>
                    </ul>
                </div>
                <div class="border_content text_center special_apply_box" v-if="!specialSureApplyInfo">
                    <img src="../../../static/img/title1.png" width="1150px" height="60px">
                    <h3 class="apply_title">特种作业持证人员继续教育{{type!=0?"面授":"网教"}}报名</h3>
                    <h4 class="apply_title_explain">请勾选您的报名信息</h4>
                    <el-form class="special_apply_form specialConfirm" label-width="100px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project text_left chooseProfess">
                            <el-tag :key="index" v-for="(item,index) in arrTabs" closable :disable-transitions="false"
                                @close="handleClose(index)">
                                {{item.certificateName}}
                            </el-tag>
                            <a @click="chooseDialogBtn" class="chooseProfessBtn">选择专业</a>
                        </el-form-item>
                        <el-form-item class="text_left chooseDiDian" label="选择地点：" v-if="type!=0"
                            style="width: 500px;margin-bottom: 6px;">
                            <el-select v-model="form.lessonPlace" placeholder="请选择地区">
                                <el-option v-for="(item,index) in areas" :key="index" :label="item.dicKey"
                                    :value="item.dicKey">
                                </el-option>
                            </el-select>
                            <p>注：体检+面授集训点</p>
                        </el-form-item>
                        <el-form-item class="text_left faceEducation" label="是否参加在线网教：" v-if="type!=0">
                            <el-radio v-model="isWebucation" label="1">是</el-radio>
                            <el-radio v-model="isWebucation" label="0">否</el-radio>
                        </el-form-item>
                        <span style="color: #FF0000;font-size: 14px;position: relative;top: -20px;">
                        	提示：若已报名网教，补报面授时“是否参加网教”请选择否！
                        </span>
                        <el-form-item label="课时数量：" v-if="isWebucation==1" class="choose_project text_left">
                            <el-input-number v-model="form.multiple" :min="1" :max="40" label="描述文字"></el-input-number>
                            <!-- <span>课时</span> -->
                        </el-form-item>

                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model.trim="form.invoiceTitle" readonly @focus="invoiceFunc"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-dialog :visible.sync="chooseDialog" width="1150px" @opened="dialogopened">
                            <choose-profession ref="mychild" @childByValue="chooseZhuan"></choose-profession>
                            <a class="special_cancel" @click="chooseDialog=false">取消</a>
                            <a class="specialBtn" @click="chooseDialoSure">确定</a>
                        </el-dialog>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <a class="apply_return" @click="prev">返回</a>
                            <a @click="submitSure">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 信息确认 -->
                <div class="border_content text_center special_apply_box" v-if="specialSureApplyInfo">
                    <img src="../../../static/img/title2.png" width="1150px" height="60px">
                    <h3 class="apply_title">特种作业持证人员继续教育{{type!=0?"面授":"网教"}}报名</h3>
                    <h4 class="apply_title_explain">确认信息</h4>
                    <el-form class="special_apply_form" label-width="100px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>

                        <el-form-item class="text_left chooseDiDian" label="选择地点：" v-if="type!=0">
                            <el-select v-model="form.lessonPlace" placeholder="请选择地区" :disabled="specialSureApplyInfo">
                                <el-option v-for="(item,index) in areas" :key="index" :label="item.dicKey"
                                    :value="item.dicKey">
                                </el-option>
                            </el-select>
                            <p>注：体检+面授集训点</p>
                        </el-form-item>
                        <el-form-item class="text_left faceEducation" label="是否参加在线网教：" v-if="type!=0">
                            <el-radio v-model="isWebucation" label="1" :disabled="specialSureApplyInfo">是</el-radio>
                            <el-radio v-model="isWebucation" label="0" :disabled="specialSureApplyInfo">否</el-radio>
                        </el-form-item>
                        <el-form-item label="课时数量：" v-if="isWebucation==1" class="choose_project text_left">
                            <el-input-number v-model="form.multiple" :min="1" :max="40" label="描述文字"
                                :disabled="specialSureApplyInfo"></el-input-number>
                            <!-- <span>课时</span> -->
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">
                                {{(parseInt(form.multiple)*proPrice+priceExt).toFixed(2)}}元({{priceExt.toFixed(2)==0.00?'不含面授':'面授'+(priceExt-20).toFixed(2)+'元,教材20元'}},{{(parseInt(form.multiple)*proPrice).toFixed(2)==0.00?'不含网教':'网教'+form.multiple+'课时'+(parseInt(form.multiple)*proPrice).toFixed(2)+'元'}})
                            </p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project"> </el-form-item>
                        <table class="special_webucation_table" width="100%">
                            <thead>
                                <tr>
                                    <th width="40px">序号</th>
                                    <th width="100px">姓名</th>
                                    <th width="220px">身份证号</th>
                                    <th>项目类别</th>
                                    <th>专业（工种）/证书编号</th>
                                    <th width="120px">有效日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in chooseZhuans" :key="index">
                                    <td width="40px">{{index+1}}</td>
                                    <td width="100px">
                                        <a target="_blank" :href="item.originalUrl"
                                            title="点击查看个人信息">{{item.realName}}</a>
                                    </td>
                                    <td width="200px">{{item.identityCode}}</td>
                                    <td>{{productName}}</td>
                                    <td>{{item.certificateName}} / {{item.certificateNumber}}</td>
                                    <td width="100px">{{new Date(item.certificateEnddate).Format('yyyy-MM-dd')}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <el-form-item label="发票抬头：" class="choose_project text_left" style="margin-top: 20px;">
                            <p class="apply_p">{{form.invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project text_left">
                            <p v-if="form.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="form.invoiceType==2" class="apply_p">专票</p>
                            <p v-if="form.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <p
                                style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">
                                提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="specialSureApplyInfo=false;">上一步</a>
                            <a @click="toPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 报名后未付款弹框 -->
            <apply-nopay :nopayData="{currentApply:currentApply,type:1}"></apply-nopay>
            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    import jxtzgArr from '../../assets/basejs/jxtzg.js'
    import chooseProfession from '../../components/special_choose_profession.vue'
    import applyNopay from '../../components/apply_nopay.vue'
    import ticketDialog from '@/components/invoice_lists.vue'
    export default {
        name: "special_webucation",
        data: function() {
            return {
                productName: "特种作业持证人员",
                type: this.$route.params.type,
                chooseDialog: false,
                specialSureApplyInfo: false,
                currentApply: undefined,
                webUser: {
                    realName: "",
                    identityCode: ""
                },
                isWebucation: "1",
                productId: 0,
                form: {
                    type: this.$route.params.type,
                    lessonPlace: "",
                    multiple: 40, //课时
                    productId: 0,
                    certificateIds: "", //选择专业
                    typeName: [],
                    invoiceType: 0,
                    invoiceTempId: "",
                    invoiceTitle: ""
                },
                chooseZhuans: [], //弹框里选择专业
                areas: [],
                produceObj: {
                    period: 0,
                    productPrice: 0,
                },
                proPrice: 0, //网教
                priceExt: 0, //面授
                arrTabs: [],
            }
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                that.webUser = info;
                if (info.currentApply != undefined) {
                    that.currentApply = info.currentApply;
                    return;
                }
                if (info.currentFaceApply != undefined) {
                    that.currentApply = info.currentFaceApply;
                }
            });
            this.getProCityArea();
        },
        methods: {
            chooseDialogBtn: function() {
                this.chooseZhuans = [];
                this.form.typeName = [];
                this.form.certificateIds = "";
                this.form.certificateOIds = "";
                this.chooseDialog = true;
            },
            dialogopened: function() {
                this.chooseZhuans = [];
                this.form.typeName = [];
                this.form.certificateIds = "";
                this.form.certificateOIds = "";
                this.$refs.mychild.getCertificates();
            },
            getProCityArea: function() {
                var that = this;
                this.common.post(this.api.getCityRepositoryList, {}, function(res) {
                    that.areas = res.resultMap;
                    if (that.areas.length == 1) {
                        that.form.lessonPlace = that.areas[0].dicKey;
                    }
                }, function(error) {
                    that.$message.error(error.resultMsg);
                });
            },
            handleClose: function(index) {
                this.arrTabs.removeAt(index);
            },
            chooseDialoSure: function() {
                var that = this;
                if (this.chooseZhuans.length <= 0) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (this.common.isEquall(this.chooseZhuans)) { //全等
                    this.arrTabs = this.chooseZhuans;
                    this.chooseDialog = false;
                    this.chooseZhuans.forEach(function(v, i) {
                        that.form.certificateIds += v.id + ",";
                        that.form.certificateOIds += v.originalId + ","
                        that.form.typeName.push(v.certificateName);
                    });
                    this.form.certificateIds = this.form.certificateIds.substr(0, this.form.certificateIds.length -
                        1);
                    this.form.certificateOIds = this.form.certificateOIds.substr(0, this.form.certificateOIds
                        .length -
                        1);
                    var productName;
                    var s = String.containValue(["机司机", "架子工", "拆卸工"], this.form.typeName[0].substr(this.form
                        .typeName[
                            0].length - 3, this.form.typeName[0].length));
                    if (s) {
                        productName = this.form.typeName[0].substr(this.form.typeName[0].length - 3, this.form
                            .typeName[
                                0].length)
                    } else {
                        productName = this.form.typeName[0]
                    }
                    this.getProductObj(productName);

                } else {
                    var h = window.innerHeight;
                    this.$message({
                        offset: h / 2 - 40,
                        type: "error",
                        message: '选择专业（工种）不属于同一类，如有疑问请参考左上方说明！'
                    });
                }
            },
            getProductObj: function(productName) {
                var that = this;
                for (var i = 0; i < jxtzgArr.length; i++) {
                    if (jxtzgArr[i].productName == productName) {
                        that.produceObj = jxtzgArr[i];
                        that.form.productId = jxtzgArr[i].id;
                        that.productId = jxtzgArr[i].id;
                        that.proPrice = jxtzgArr[i].productPrice; //网教价格
                        if (this.type == 0) {
                            that.priceExt = 0; //面授价格
                        } else {
                            that.priceExt = 70; //面授价格
                        }
                        return;
                    }
                }
                // this.common.post(this.api.getTzgProductPrice, this.form, function(res) {
                //     that.produceObj = res.resultMap;
                //     that.form.productId = res.resultMap.id;
                //     that.proPrice = res.resultMap.productPrice; //网教价格
                //     that.priceExt = res.ext ? res.ext : 0; //面授价格
                // });
            },
            chooseZhuan: function(checkedCities) {
                this.chooseZhuans = checkedCities;
            },
            invoiceFunc: function() {
                this.form.invoiceTitle = "";
                this.form.invoiceTempId = "";
                this.$refs.invoiceChild.getInvoiceTemp();
            },
            invoiceBtn: function(data) {
                this.form.invoiceType = data.invoiceType;
                this.form.invoiceTempId = data.invoiceTempId;
                this.form.invoiceTitle = data.invoiceTitle;
            },
            submitSure: function() {
                var that = this;
                if (this.chooseZhuans.length <= 0) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (this.type != 0 && this.form.lessonPlace == "") {
                    this.$message.error("请选择面授地点！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.invoiceTempId)) {
                    this.$message.error("请选择发票！");
                    return;
                }
                // 网教获取projectId
                if (parseInt(this.isWebucation) == 0) {
                    this.form.multiple = 0;
                    this.produceObj.period = 0;
                }
                this.specialSureApplyInfo = true;
            },
            prev: function() {
                var that = this;
                this.common.toPage("/index");
            },
            toPay: function() {
                var that = this;
                localStorage.setItem("isTiPrev", 1);
                localStorage.setItem("faceTiPrev", that.type);
                this.form.productId = this.productId;
                if (parseInt(this.isWebucation) == 0) {
                    this.form.productId = 0;
                }
                if (this.priceExt.toFixed(2) == 0.00) {
                    this.form.remark = String.Format("不含面授,网教{0}课时{1}元", this.form.multiple, (parseInt(this.form
                            .multiple) *
                        this.proPrice).toFixed(2));
                } else if ((parseInt(this.form.multiple) * this.proPrice).toFixed(2) == 0.00) {
                    this.form.remark = String.Format("面授{0}元,教材20元,不含网教", (this.priceExt - 20).toFixed(2));
                } else {
                    this.form.remark = String.Format("面授{0}元,教材20元',网教{2}课时{1}元", (this.priceExt - 20).toFixed(2),
                        (parseInt(this.form.multiple) * this.proPrice).toFixed(2), this.form.multiple);
                }
                if (this.type == 0) {
                    console.log("特种工网教报名")
                    this.common.post(this.api.tzgNetLaunchApplyTrade, this.form, function(res) {
                        that.common.toPage("/apply/zhifubao/" + res.resultMap);
                    });
                    return;
                }
                console.log("特种工报名")
                this.common.post(this.api.launchApplyTrade, this.form, function(res) {
                    that.common.toPage("/apply/zhifubao/" + res.resultMap);
                });
            }
        },
        components: {
            headerFooter,
            chooseProfession,
            applyNopay,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
    }

    .el-checkbox {
        margin-right: 0;
    }

    .special_webucation_table td .el-checkbox__label {
        display: none;
    }

    .special_apply_box .el-tag {
        margin: 0 6px;
    }

    .faceEducation .el-form-item__label {
        width: 164px !important;
    }
</style>
